<div class="che-machine-agents">
  <div flex>
    <!-- Agents list header -->
    <div flex layout="column" md-theme="maincontent-theme">
      <che-list-header che-hide-header="!machineAgentsController.agentsList.length">
        <div flex="100"
             layout="row"
             layout-align="start stretch"
             class="che-list-item-row">
          <div layout="row" layout-align="center center" class="che-list-item-checkbox"></div>
          <div flex layout="row" layout-align="start center" class="che-list-item-details">
            <che-list-header-column flex="10" layout="column" layout-align="center start"
                                    che-column-title="State"></che-list-header-column>
            <che-list-header-column flex="25" layout="column" layout-align="center start"
                                    che-sort-value="machineAgentsController.agentOrderBy"
                                    che-sort-item="name"
                                    che-column-title="Installer"></che-list-header-column>
            <che-list-header-column flex="15" layout="column" layout-align="center start"
                                    che-column-title="Version"></che-list-header-column>
            <che-list-header-column flex="50" layout="column" layout-align="center start"
                                    che-column-title="Description"></che-list-header-column>
          </div>
        </div>
      </che-list-header>
      <!-- Agents list  -->
      <che-list class="machine-agents-list" flex
                ng-if="machineAgentsController.agentsList && machineAgentsController.agentsList.length > 0">
        <div class="machine-agents-item"
             ng-repeat="agentItem in machineAgentsController.agentsList | orderBy:[machineAgentsController.agentOrderBy, '-version' ]">
          <che-list-item flex>
            <div flex="100"
                 layout="row"
                 layout-align="start stretch"
                 agent-item-name="{{agentItem.name}}"
                 agent-item-version="{{agentItem.version}}"
                 class="che-list-item-row">
              <div layout="row" layout-align="center center" class="che-list-item-checkbox"></div>
              <div flex layout="row" layout-align="start center">
                <!-- isEnabled -->
                <div flex="10">
                  <md-switch ng-model="agentItem.isEnabled"
                             ng-disabled="machineAgentsController.isLocked(agentItem.id)"
                             ng-change="machineAgentsController.updateAgent(agentItem)"
                             aria-label="Machine agent"
                             agent-switch="{{agentItem.name}}">
                  </md-switch>
                </div>
                <!-- Name -->
                <div flex="25">
                  <span class="che-list-item-name" agent-name="{{agentItem.name}}">{{agentItem.name}}</span>
                </div>
                <!-- Version -->
                <div flex="15">
                  <span class="che-list-item-name" agent-version="{{agentItem.version}}">{{agentItem.version}}</span>
                </div>
                <!-- Description -->
                <div flex="50">
                  <span class="che-list-item-secondary" agent-description="{{agentItem.description}}">{{agentItem.description}}</span>
                </div>
              </div>
            </div>
          </che-list-item>
        </div>
      </che-list>
    </div>
  </div>
</div>
